<template>
  <div class="searchList">
    <div class="content">
      <router-link
        tag="div"
        :to="'/details?id=' + vl.id"
        class="item"
        v-for="vl in searchList"
        :key="vl.id"
      >
        <div class="img">
          <img :src="vl.imgUrl" alt="" />
        </div>
        <div class="text">
          <div class="title one-txt-cut">
            {{ vl.title }}
          </div>
          <div class="price">￥{{ vl.price }}.00</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ["searchList"],
  data() {
    return {
      property: "value",
    };
  },
};
</script>

<style lang="scss" scoped>
.searchList {
  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 6px 12px 100px;
    clear: both;

    > .item {
      padding-bottom: 18px;
      width: calc(50% - 5px + (5px / 2));
      margin-right: 5px;

      > .img {
        width: 100%;

        > img {
          width: 100%;
        }
      }

      .text {
        margin-top: 4px;

        > .title {
          font-size: 14px;
          line-height: 14px;
        }

        > .price {
          margin-top: 4px;
          color: #9d7d61;
          font-size: 14px;
          line-height: 14px;
        }
      }

      &:nth-of-type(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>